<template>
    <div>
        <div class="xtx-steps">
            <div class="xtx-steps-item active" v-for="i in 5" :key="i">
              <div class="step"><span>{{i}}</span></div>
              <div class="title">提交订单</div>
              <div class="desc">2021-03-18 02:11:47</div>
            </div>
          </div> 
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
div,p,ul,ol,li,dl,dt,dd,form,table,h1,h2,h3,h4,h5,h6,input,select,textarea,span,strong,em,b,i,u,a,img,*{padding:0;margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
body { font-family: '黑体'; font-size: 12px;  color: #000; background-color: #fff; }
ul,ol,li { list-style: none; }
h1,h2,h3,h4,h5,h6{ font-size: 14px;}
a img{ border: none;}
img,input,textarea,select,option,output,span,a,b,em,i,strong,u,s,button,label{ vertical-align:middle;}
table{border-collapse:collapse;}
a { background: transparent; text-decoration: none; color: #333; }
a:hover{  color: #f90; }
.clear{ clear:both; height: 0; width: 0; overflow: hidden;}
body,html{height: 100%;width: 100%;}
.xtx-steps {
    display: flex;
    text-align: center;
    &-item {
      flex: 1;
      &:first-child {
        .step {
          &::before {
            display: none;
          }
        }
      }
      &:last-child {
        .step {
          &::after {
            display: none;
          }
        }
      }
      &.active {
        .step {
          > span {
            border-color:#27ba9b;
            background: #27ba9b;
            color: #fff
          }
          &::before,&::after {
            background: #27ba9b;
          }
        }
        .title {
          color: #27ba9b;
        }
      }
      .step {
        position: relative;
        > span {
          width: 48px;
          height: 48px;
          font-size: 28px;
          border: 2px solid #e4e4e4;
          background: #fff;
          border-radius: 50%;
          line-height: 44px;
          color: #ccc;
          display: inline-block;
          position: relative;
          z-index: 1;
        }
        &::after,&::before{
          content: "";
          position: absolute;
          top: 23px;
          width: 50%;
          height: 2px;
          background: #e4e4e4;
        }
        &::before {
           left: 0;
        }
        &::after {
           right: 0;
         }
      }
      .title {
        color: #999;
        padding-top: 12px;
      }
      .desc {
        font-size: 12px;
        color: #999;
        padding-top: 6px;
      }
    }
  }
</style>